<template>
  <el-table
    ref="gridRef"
    v-bind="gridTable"
    :data="dataList"
    :row-key="gridMeta.idName"
    @selection-change="selectionChange"
    @current-change="currentChange"
  >
    <!--显示选择框-->
    <el-table-column v-if="!($attrs['show-summary'])"
      type="selection"
      width="55"
      align="center"
      header-align="center"
    >
    </el-table-column>
    <!--显示字段列表-->
    <template
      v-for="(id, index) in gridMeta.colOrder"
      :key="'grid_list_' + index + '_' + id"
    >
      
      <!--带插槽的列-->
      <el-table-column
        v-if="(slotsKey.includes(itemMeta[id].colName))"
        :column-key="'col_' + id"
        v-bind="itemMeta[id]"
      >
        <template #header
          v-if="slotsKey.includes('header_' + itemMeta[id].colName)"
        >
          <slot :name="'header_' + itemMeta[id].colName"></slot>
        </template>
        <template #default="scope"
          v-if="(slotsKey.includes(itemMeta[id].colName))"
        >
          <slot :name="itemMeta[id].colName" v-bind="scope"></slot>
        </template>
      </el-table-column>
      <!--不带插槽的列-->
      <el-table-column v-else
        :key="'grid_list_' + index + '_' + id"
        :column-key="'col_' + id"
        :min-width="50"
        v-bind="itemMeta[id]"
        :prop="itemMeta[id].colName"
      >
      </el-table-column>
    </template>
  </el-table>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import { ElTable, ElTableColumn } from 'element-plus'
  // 表单控件的属性 
  import { gridProps } from '../map'

  import choiceManage from './controller'

  /**
   * 支持插槽扩展的列表
   */
  export default defineComponent({
    name: 'nf-elp-grid-list-slot',
    inheritAttrs: false,
    components: {
      ElTable, ElTableColumn
    },
    props: {
      ...gridProps
    },
    setup (props, context) {
      // console.log('\ngrid---props', ctx) //

      const slots = context.slots
      const slotsKey = Object.keys(slots)

      // 获取 table 的 dom 和其他，
      const gridRef = ref(null)

      // 列表选项的事件
      const {
        currentChange, // 单选
        selectionChange // 多选
      } = choiceManage(props.selection, props.gridMeta.idName, gridRef)

      return {
        slotsKey,
        selectionChange, // 多选
        currentChange, // 单选
        gridRef // table 的 dom
      }
    }
  })
</script>
